<template>
  <div>
    <div>{{ count }}</div>
    <button @click="changeCount">+</button>
  </div>
</template>
<!-- 
  vue和react的两大核心：数据驱动，组件化
  1、在vue2中通过使用Object.defineProperty来实现劫持，具体的缺陷如下三个
  1）劫持不了数组-----通过重写原型上的7个方法来解决
  2）对于后续新增的属性、删除的属性劫持不了的-----通过Vue.set来解决
  3）对于数据的初始化要进行深度遍历，因为Object.defineProperty是对对象中的属性进行劫持的，严重的影响了性能
  2、vue3中使用两种来进行劫持的
  1）使用Proxy来处理引用类型的数据
  好处：
  1.1）对于数组也能劫持的，对Map、Set也能劫持
  1.2）对于新增的，删除属性也能劫持
  1.3）是对整个对象进行劫持的，而且而且拦截也是懒处理行为，如果用户没有访问嵌套对象，那么也不会实施拦截，这就让初始化的速度和内存占有都有所改善
  好处：处理不了基本类型的数据
  vue3为基本类型的处理简单的响应式对象ref
  总结：vue3中基本类型:ref，如果是引用类型:reactive---(proxy)
  3、ref的基本使用
  1)导入ref函数
  2)调用ref函数创建响应式的数据
  let ref变量=ref<数据类型>(初始值)
  3)在template模板中使用
  4)在js中操作ref变量:ref变量.value++
 -->
<script lang='ts' setup>
import {ref} from 'vue'
 let count=ref<number>(0)
 const changeCount=()=>{
   console.log('count',count);
   count.value++
 }
</script>

<style lang='scss' scoped>
</style>